<script setup lang="ts">
defineOptions({
  name: "echartsChart"
});
import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import { emitter } from "@/utils/mitt";
import type { LabelLayoutFunctionType, EchartsInstanceFunctionType } from "@/views/common/components/types";

interface Props {
  /**  获取当前echarts实例对象，参数为实例对象和回调函数 */
  getEchartsInstance?: EchartsInstanceFunctionType | null;
  /**  获取 optiins 配置函数 */
  labelLayoutFn?: LabelLayoutFunctionType | null;
  /**  同 echarts option */
  options?: CommonEcharts.CommonEchartsOption | null;
  /**  有 title 时传入 */
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  /**  title 栏右侧文字 */
  rightText?: string | number;
  /**  模块最低宽度，默认 330px */
  width?: number;
  /**  模块最低高度，默认 200px */
  height?: number;
  /**  是否需要背景阴影，默认为true */
  boxShadow?: boolean;
  /**  是否需要圆角，默认为true */
  borderRidus?: boolean;
  /**  表格数据 */
  dataList?: any[];
  /**表格列 */
  tableColumns?: any[];
  /**类型 */
  energyType?: string;
  /**复选按钮组 */
  radioOptions?: any[];
}

const props = withDefaults(defineProps<Props>(), {
  width: 330,
  height: 333,
  boxShadow: false,
  borderRidus: false,
  energyType: "all"
});

const emits = defineEmits(["btn-click", "radio-click"]);

const echartsKey = ref<string>(Math.random().toString(36).slice(2, 10));
const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);

const title_height = computed(() => (props.title ? "32px" : "0px"));
const radio_height = computed(() => (props.radioOptions ? "30px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);
const energyType = computed(() => props.energyType);

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "color-row";
  }
  return "common-row";
};

const clickHandler = () => emits("btn-click");

const updateEchartsKey = () => {
  emitter.on("viceMenuChange", () => {
    echartsKey.value = Math.random().toString(36).slice(2, 10);
  });
};

const queryTypeParams = ref({});

const handleChangeTypeFn = (val: string) => {
  emits("radio-click", val);
};

type itemStyleType = {
  [key: string]: string;
};

interface dataType {
  name: string;
  value: number;
  itemStyle?: itemStyleType;
}

const getEcharts = async () => {
  await nextTick();
  return echartsComRef.value.getEcharts();
};

onMounted(async () => {
  updateEchartsKey();
});

defineExpose({
  getEcharts
});
</script>

<template>
  <div class="echarts-chart" :class="{ boxShadow, borderRidus }">
    <div class="model-con">
      <div class="model-con-left">
        <px-form v-if="radioOptions" ref="queryTypeRef" :model="queryTypeParams" :inline="true" label-position="left" style="height: 30px">
          <px-form-item label="排序" prop="dataFormat">
            <px-radio-group v-model="energyType" style="margin-left: 10px" @change="handleChangeTypeFn">
              <px-radio v-for="item in radioOptions" :key="item.name" :size="item.size" :label="item.label">{{ item.name }}</px-radio>
            </px-radio-group>
          </px-form-item>
        </px-form>
        <px-table class="table-card-table table-card-con" :data="dataList" :row-class-name="tableRowClassName">
          <px-table-column label="序号" type="index" width="60" align="center" />
          <px-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :min-width="item?.minWidth"
            :width="item?.width"
            :align="item?.align"
            :show-overflow-tooltip="item.showOverflowTooltip || true"
            :fixed="item?.fixed"
            :type="item?.type"
            :sortable="item.sortable"
            :sort-orders="item.sortOrders"
            :sort-by="item.sortBy"
          >
            <template #default="scope">{{
              scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
            }}</template>
          </px-table-column>
          <template #empty>
            <px-empty :image-size="80" />
          </template>
        </px-table>
      </div>
      <div class="echarts-chart-com">
        <echartsCom
          ref="echartsComRef"
          :key="echartsKey"
          :getEchartsInstance="getEchartsInstance"
          :labelLayoutFn="labelLayoutFn"
          :options="options"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.echarts-chart {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  min-width: v-bind(min_width);
  height: 100%;
  padding: 5px 0 0;

  .model-title-slot {
    display: flex;
    gap: 16px;
    align-items: center;

    .right-text {
      font-weight: 600;
      line-height: 1;
      color: var(--px-color-primary);
    }
  }

  .model-con {
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
    width: 100%;
    height: 100%;

    .model-con-left {
      flex: 1;
    }

    .echarts-chart-com {
      min-width: 400px;
      height: 100%;
      text-align: center;
      vertical-align: middle;
    }
  }
}

.boxShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.borderRidus {
  border-radius: 4px;
}

.table-card-con {
  width: 100%;
  height: calc(100% - v-bind(radio_height));
}

/** 删除表格所有边框线 */
.table-card-table :deep(.px-table__header th) {
  border-bottom: none;
}

.table-card-table :deep(.px-table__row > td) {
  border: none;
}

.table-card-table :deep(.px-table th.px-table__cell.is-leaf) {
  border-bottom: none;
}

.table-card-table :deep(.px-table__inner-wrapper::before) {
  height: 0;
}

/** 改变表格斑马纹颜色 */
.table-card-table :deep(.color-row) {
  height: 41px;
  background: #e7eefb;
}

.table-card-table :deep(.common-row) {
  height: 41px;
}
</style>
